entry {
    ui::interact-with-window {
        title: { const 'Global Keyboard Event Demo' },
        content: Root,
        assets: [StyleSheet],
        on-close: { Some { sys::exit 0 } }
    }
};
asset StyleSheet: AssetCSS 'assets/style.css';

function inc:
    &(Reactive[Number]) => ui::EventCallback
    &(counter) => { ui::EventCallback
        \ do
        let n := counter.out.sample,
        (counter.in <- (n + 1))
    };

const Root: ui::Component
    \ use
    let local-count := { ui::State 0 },
    \ use
    let global-count := { ui::State 0 },
    let root := { { ui::Box [] } [
        { ui::Label '[Box] (keyup.global)' },
        { { ui::Box ['row'] } [
            ({ ui::TextInput ('', Blackhole) } with
                { ui::Event ('keyup', { inc local-count }) }),
            { ui::Label '(keyup)' }
        ] },
        { { ui::Box ['row'] } [
            ({ ui::TextInput ('', Blackhole) } with
                { ui::Event ('keyup.stop', { inc local-count }) }),
            { ui::Label '(keyup.stop)' }
        ] },
        { ui::Text (local-count.out map &(n) => { "local: ?" n.{String} }) },
        { ui::Text (global-count.out map &(n) => { "global: ?" n.{String} }) }
    ] },
    (root with
        { ui::Event ('keyup.global', { inc global-count }) });
